<template>
	<view class="cu-modal" :class="showLogin?'showmodel':''">
		<view class="cu-dialog">
			<view class="modal-box">
				<image class="head-bg"  src="../../static/images/nologin_bg.png" mode=""></image>
				<view class="detail">
					<view class="title1">您还没有登录</view>
					<view class="title2">登录即刻开启品质生活</view>
				</view>
				<view class="btn-box y-f">
					<button class="cu-btn login-btn" @click="onLogin">立即登录</button>
					<button class="cu-btn close-btn" @click="hideModal">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return{
			}
		},
		created() {
	
		},
		methods:{
			// 隐藏登录弹窗
			hideModal() {
				this.$emit("loginhidden",false)
				uni.reLaunch({
					url:"/pages/index/index"
				})
			},
			onLogin(){
				this.$emit("loginhidden",false) 
				uni.removeStorageSync("TOKEN")
				uni.navigateTo({
				  url: '/pages/login/login'
				});
			}
		},
		props:["showLogin","typeId"]
	}
</script>

<style scoped lang="scss">
// 登录提示
.cu-modal{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 999;
	background: rgba(0,0,0,.3);
	bottom: -1000px;
	left: 0;
	transition: all 3s;
}
.showmodel{
	top: 0;
}
.modal-box {
	width: 610rpx;
	border-radius: 20rpx;
	background: #fff;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	padding-bottom: 10rpx;
	.head-bg {
		width: 100%;
		height: 210rpx;
	}

	.detail {
		margin-top: 30rpx;
		.title1 {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
		}

		.title2 {
			font-size: 28rpx;
			padding-top: 20rpx;
			text-align: center;
		}
	}

	.btn-box {
		margin-top: 80rpx;

		.login-btn {
			width: 492rpx;
			height: 70rpx;
			background: $uni-item-color;
			border-radius: 35rpx;
			font-size: 28rpx;
			color: rgba(#fff, 0.9);
		}

		.close-btn {
			width: 492rpx;
			height: 70rpx;
			color: $uni-item-color;
			font-size: 28rpx;
			margin-top: 20rpx;
			background: none;
			text-decoration: underline;
			&:after{
				border: none;
			}
		}
	}
}

// 小程序登录提醒
/* #ifdef MP-WEIXIN */
.force-login-wrap {
	position: fixed;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	z-index: 11111;
	top: 0;
	background: linear-gradient(180deg, rgba(239, 196, 128, 1) 0%, rgba(248, 220, 165, 1) 25%, rgba(255, 255, 255, 1) 98%);
	.logo-bg {
		width: 640rpx;
		height: 300rpx;
	}
	.force-login__content {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		.user-avatar {
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: hidden;
			margin-bottom: 40rpx;
		}
		.user-name {
			font-size: 35rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(132, 87, 8, 1);
			margin-bottom: 30rpx;
		}
		.login-notice {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: rgba(200, 150, 61, 1);
			line-height: 44rpx;
			width: 400rpx;
			text-align: center;
			margin-bottom: 80rpx;
		}
		.author-btn {
			width: 630rpx;
			height: 80rpx;
			background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
			box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
			border-radius: 40rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}
		.close-btn {
			width: 630rpx;
			height: 80rpx;
			margin-top: 30rpx;
			border-radius: 40rpx;
			border: 2rpx solid rgba(233, 180, 97, 1);
			background: none;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: rgba(233, 180, 97, 1);
		}
	}
}
/* #endif */
</style>
